<template>
  <div class="role-management">
    <div class="table-c">
      <BasicTable 
        :scroll="{ x: false }"  
        @register="registerTable"
        rowKey="trainingNumberId" 
        size="small" 
        :pagination="{ pageSize: 10 }"
        @change="handleTableChange">
        <template #toolbar>
          <a-button type="primary" @click="handleCreate" v-auth="'addRole'"> 新增角色 </a-button>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'actions'">
            <form-outlined @click="handleEdit(record)" class="color-#0960bd font-size-15px mr-15px" v-auth="'editRole'"/>
            <a-popconfirm @confirm="handleDelete(record)" title="是否确认删除" ok-text="确认" cancel-text="取消">
              <delete-outlined class="color-#ed6f6f font-size-15px" v-auth="'deleteRole'"/>
            </a-popconfirm>
          </template>
        </template>
      </BasicTable>
    </div>
    <RoleDrawer @register="registerDrawer" @success="handleSuccess" />
  </div>
</template>

<script lang="ts" setup>
  import { BasicTable, useTable, TableAction } from '@/components/Table'
  import { selectCrmRolePage, enableDisableRole } from '@/api/role/index.ts'

  import { useDrawer } from '@/components/Drawer'
  import RoleDrawer from './RoleDrawer.vue'

  import { columns, searchFormSchema, getPagination } from './role.data'
  import { message } from 'ant-design-vue'

  defineOptions({ name: 'RoleManagement' });

  const [registerDrawer, { openDrawer }] = useDrawer();
  const [registerTable, { reload }] = useTable({
    title: '角色列表',
    api: selectCrmRolePage,
    columns,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    useSearchForm: true,
    bordered: true,
    showIndexColumn: false,
    canResize: false,
  });

  function handleCreate() {
    openDrawer(true, {
      isUpdate: false,
    });
  }

  function handleEdit(record: any) {
    openDrawer(true, {
      record,
      isUpdate: true,
    });
  }

  async function handleDelete(record: any) {
    let params = {
      id: record.id,
      status: 2 // 0:启用 1:禁用 2:删除
    }
    const res = await enableDisableRole(params)
    if(res.code == 10000){
      message.success('删除成功')
      reload()
    }else{
      message.error(res.msg)
    }
  }

  function handleTableChange(pagination){
    getPagination(pagination)
  };

  function handleSuccess() {
    reload();
  }
</script>

<style scoped lang="less">
.role-management{
  .ft-basic-table-form-container{
    padding: 0;
  }
  :deep(.ft-basic-title){
    font-size: 18px;
    font-weight: bold;
  }
  :deep(.ant-table){
    padding: 20px;
    .ant-table-container{
      margin-top: 10px;
    }
    .ft-basic-table-header__toolbar{
      padding-top: 0;
    }
  }
  :deep(.ant-pagination){
    padding: 0 20px 20px 0;
  }
  .table-c{
    :deep(.ant-btn-loading-icon){
      display: none;
    }
    :deep(.ant-btn.ant-btn-loading){
      opacity: 1;
      cursor: pointer;
    }
  }
}
</style>